<template>
  <section class='f-more'>
    <header class="f-cell" @click="pageJump('/more/shop')">
      <div class="g-flex-ct">
        <img v-if="shopForm.certificationStatus" style="height:70px;width:70px;" src="@/assets/icons/icon_shop_head@2x.png"
          alt="">
        <img v-else style="height:70px;width:70px;" src="@/assets/icons/icon_shop_head_weishiming.png" alt="">
        <div class="f-ml-15">
          <p>{{shopForm.shopName || '--'}}</p>
          <p class="f-mt-10" style="font-size: 14px;">{{operationalStatus[shopForm.operationalStatus] }}</p>
        </div>
      </div>
      <van-icon size="16" name="arrow" />
    </header>

    <van-cell title="我的代理商" is-link style="color:#000000" @click="pageJump('/agentShop')">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:17px;width:17px" src="@/assets/icons/me_icon_agent_gray.png" alt="">
        </section>
      </template>
      <template #value>
        <p style="color: #488BFE;">{{shopForm.consumerCount}}</p>
      </template>
    </van-cell>
    <van-cell title="分佣设置" is-link style="color:#000000" @click="pageJump('/yongConfig')">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:15px;width:16px" src="@/assets/icons/me_icon_percentage_gray.png" alt="">
        </section>
      </template>
    </van-cell>

    <!-- <van-cell class="f-mt-15" title="支付宝绑定" is-link style="color:#000000" @click="toZFB()">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:18px;width:18px" src="@/assets/icons/me_icon_zfb_gray.png" alt="">
        </section>
      </template>
    </van-cell> -->
    <van-cell class="f-mt-15" title="银行卡绑定" is-link style="color:#000000" @click="toYHK()">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:18px;width:18px" src="@/assets/icons/me_icon_yhk_gray.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="更换手机号码" is-link style="color:#000000" @click="pageJump('/more/changePhone')">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:18px;width:12px" src="@/assets/icons/jhh_more_icon_phone.png" alt="">
        </section>
      </template>
    </van-cell>
    <van-cell title="修改登录密码" is-link style="color:#000000" @click="pageJump('/more/changePwd')">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:15px;width:15px" src="@/assets/icons/jhh_more_icon_passward.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="在线客服" is-link style="color:#000000" @click="toWechat">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:16px;width:15px" src="@/assets/icons/jhh_more_icon_kefu.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="分享秒返App" is-link style="color:#000000" @click="showShare = true">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:16px;width:16px" src="@/assets/icons/jhh_more_icon_share.png" alt="">
        </section>
      </template>
    </van-cell>
    <van-cell v-show="isApp" title="关于" is-link style="color:#000000" @click="toAbout">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:18px;width:18px" src="@/assets/icons/jhh_more_icon_about.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-cell class="f-mt-15" title="退出登录" is-link style="color:#000000" @click="handleQuit">
      <template #icon>
        <section class="g-flex-ct" style="width:28px">
          <img style="height:16px;width:15px" src="@/assets/icons/jhh_more_icon_exit.png" alt="">
        </section>
      </template>
    </van-cell>

    <van-share-sheet v-model:show="showShare" :options="shareOptions" @select="onSelect" />

    <van-overlay :show="off.overlay">
      <div class="f-wrapper">
        <p style="font-weight: 500;font-size: 19px;color: #000000;">请设置自己的留存比例</p>

        <van-field style="margin-top:30px" v-model="shopForm.incomeDiscount" label="" placeholder="请输入留存百分比" type="number" />
        <p class="f-right" style="font-weight: 500;font-size: 12px;color: #666666;padding:7px 24px 20px 5px">单位：%</p>

        <div style="padding:21px 40px 0 40px">
          <van-button round block type="primary" color="#488BFE" @click="handleIncomediscount()">确定</van-button>
        </div>
      </div>
    </van-overlay>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import JsBridge from '@/utils/JsBridge.js'
import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant';
import { getStore, successDeal, warningDeal } from '@/utils/utils';
import api from './api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      off: {
        overlay: false,
      },

      userInfo: {},

      shopForm: {
        incomeDiscount: 0
      },

      operationalStatus: {
        '0': '拉黑',
        '1': '正常',
        '2': '邀请码冻结',
      },

      showShare: false,
      shareOptions: [
        { name: '微信', icon: 'wechat' },
        { name: '复制链接', icon: 'link' },
      ],

      isApp: computed(() => {
        return store.state.isApp
      }),
    })

    onMounted(() => {
      state.userInfo = getStore('USER_INFO_MF')

      store.commit("setNavBar", {
        title: '',
        show: true,
        left: false,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: '#488BFE'
      });

      if (!state.isApp) {
        state.shareOptions = [
          // { name: '微信', icon: 'wechat' },
          { name: '复制链接', icon: 'link' },
        ]
      }

      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        res.data.incomeDiscount = res.data.incomeDiscount / 10
        state.shopForm = res.data
      })
    }

    const handleQuit = () => {
      let json = {
        "tmsi": state.userInfo.tmsi,
        "userId": state.userInfo.userId,
      }
      showConfirmDialog({
        title: '退出登录',
        message:
          '确定要退出登录吗？',
      }).then(() => {
        if (state.isApp) {
          JsBridge.callHandler('quit', json, (response) => {
            let res = JSON.parse(response)
            router.replace('/')
            if (res.code != 200) {
              showToast(res.msg ? res.msg : res.error)
            }
          })
        } else {
          api.companyQuitH5(json).catch(err => {
            console.log(err)
          })
          router.replace('/')
        }
      }).catch(() => {
      })
    }

    const pageJump = (path) => {
      router.push({
        path
      })
    }

    const onSelect = (option) => {
      let url = `${location.origin}${location.pathname}#/share?code=${state.shopForm.shopCode}`
      if (option.name == '复制链接') {
        handleCopy(url)
      }
      if (option.name == '微信') {
        const data = {
          type: "wechat_session",
          url: url,
          key: "wx15c4f6e4eaa14443",
          title: '秒返宝',
          description: '秒返宝分享'
        }
        JsBridge.callHandler('share', data, (res) => {
          console.log('share 响应值 ： ', res);
        })
      }

      state.showShare = false;
    };

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const toAbout = () => {
      JsBridge.callHandler('push', { pageName: 'About', pageData: "测试跳转" }, (res) => {
        console.log('pushPage 响应值 ： ', res);
      })
    }

    const toWechat = () => {
      router.push({
        path: '/more/wechat'
      })
    }

    const handleIncomediscount = () => {
      let number = state.shopForm.incomeDiscount
      if (number > 100) {
        warningDeal('留存比例不能大于100！')
        return
      }

      if (number.indexOf('.') > -1 && number.toString().split(".")[1].length > 1) {
        warningDeal('留存比例最多一位小数！')
        return
      }
      let incomeDiscount = JSON.parse(JSON.stringify(state.shopForm.incomeDiscount))
      let json = {
        incomeDiscount: incomeDiscount * 10
      }
      api.incomediscount(json).then(res => {
        successDeal('设置成功！')
        state.off.overlay = false
      })
    }

    const toZFB = () => {
      router.push({
        path: '/capital/account/zfb'
      })
    }

    const toYHK = () => {
      router.push({
        path: '/capital/account/yhk'
      })
    }

    return {
      ...toRefs(state),
      handleQuit,
      pageJump,
      onSelect,
      toAbout,
      toWechat,
      handleIncomediscount,
      toZFB,
      toYHK,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-more {
  .f-cell {
    width: 375px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url("@/assets/imgs/me_bg_title.png");
    background-size: 100% 100%;
    padding: 0 20px 30px 14px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
  }
  .f-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);

    width: 305px;
    background: #ffffff;
    border-radius: 7px;
    text-align: center;
    padding: 20px 0;
    ul {
      margin-top: 20px;
      li {
        display: flex;
        margin: 5px 0;
        font-size: 14px;
        color: #ff6868;
        p:first-child {
          width: 190px;
          text-align: right;
          color: #707070;
        }
      }
    }
  }
}
</style>